<template>
    <div class="add-student-page">
        <div class="alert">
            <div class="alert-box">
                <h2>转班</h2>
                <i class="el-icon-close close" @click="cancel"></i>
                <el-form ref="form" :model="form" label-width="60px" class="add-class-form">
                    <el-form-item label="原班级" class="select-block">
                        <el-input disabled v-model="form.oldClass"></el-input>
                    </el-form-item>
                    <el-form-item label="新班级" class="select-block">
                        <el-select v-model="form.newClass" filterable placeholder="请选择新班级" @change="change">
                            <el-option :label="v.mc" :value="v.id + ''" v-for="v in classList"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <el-button type="primary" @click="submit">确定</el-button>
                    <!-- <el-button @click="cancel" type="text">取消</el-button> -->
                </div>
            </div>
        </div>
        <LoadingComponent v-if="isLoading"></LoadingComponent>
    </div>
</template>

<script type="text/javascript">
    import LoadingComponent from 'components/loading'
    export default {
        components: { LoadingComponent },
        props: ['params', 'className'],
        data () {
            return {
                isLoading:false,
                classList:[],
                multipleDelNum: [],
                classid: '',
                form: {
                    oldClass: '',
                    newClass: ''
                }
            }
        },
        created () {
            console.log(this.params)
            this.form.oldClass = this.className
            this.getClass()
            // this.getStudent()
        },
        methods: {
            handleSelectionChange(val) {
                // this.multipleSelection = val;
                console.log(val)
            },
            change (val) {
                // console.log(val)
                this.classid = val;
            },
            submit () {
                // this.isLoading = true;
                console.log(this.classid, this.params.row.id)
                this.$store.state.loading = true;

                this.axios.get(this.$store.state.api + 'xs/zb', {
                    params: {
                        bjid: this.classid,
                        xsid: this.params.row.id
                    }
                }).then( res => {
                    console.log(res)
                    this.$store.state.loading = false;
                }).catch( res => {
                    console.log(res)
                    this.$store.dispatch('showAlert',res.data.msg)
                    this.$store.state.loading = false;
                })

                // this.isLoading = false;
                
                this.$emit('close',{type:'change',cancel:false})
            },
            cancel () {
              this.$emit('close',{type:'change',cancel:true})
            },
            // checkSelect (selection, row) {//点击单选select触发事件
            //     console.log(selection, row)
            //     let strID = [];
            //     selection.forEach(function(v,i){
            //         strID.push(v.id)
            //     })
            //     this.multipleDelNum = strID.join(",");
            //     console.log(this.multipleDelNum)
            // },
            // checkall (selection) {//点击全选select触发事件
            //     let strID = [];

            //     selection.forEach(function(v,i){
            //         strID.push(v.id)
            //     })
            //     // console.log(strID.join(","))
            //     this.multipleDelNum = strID.join(",");
            //     // console.log(strID)
            //     console.log(this.multipleDelNum)
            // },
            getClass () {
                this.$store.state.loading = true;
                this.axios.get(this.$store.state.api + 'bj/listbj').then( res => {
                    console.log(res)
                    this.classList = res.data.data
                    this.$store.state.loading = false;
                }).catch( res => {
                    console.log(res)
                    this.$store.dispatch('showAlert',res.data.msg)
                    this.$store.state.loading = false;
                })
            }
            // getStudent (val) {
            //     console.log(val)
            //     this.axios.get(this.$store.state.api + 'xs/listxs',{
            //         params: {
            //             bjid: this.params.row.id
            //         }
            //     }).then( res => {
            //         console.log(res)
            //         // this.classList = res.data.data
            //         this.addStudentList = res.data.data.list;
            //         console.log(this.addStudentList)
            //     }).catch( res => {
            //         console.log(res)
            //     })
            // }
        }
    }
</script>

<style lang="less" scoped>
    .add-student-page {
        -moz-box-shadow:0px 0px 20px #969696;          /*firefox*/
        -webkit-box-shadow:0px 0px 20px #969696;      /*webkit*/
        box-shadow:0px 0px 20px #969696; 
        padding:30px 50px;

        .alert-box {
            width: 300px;
        }

        .add-class-form {
            width:100%;
            text-align: left;
            // margin:0 auto;

            .select-block{
                width: 250px;
                display: block;
            }
        }

        .btn{
            text-align: center;
            margin:30px 0 0 0;

            button:nth-child(1) {
                width: 100px;
            }
        }
        h2{
            line-height: 30px;
        }
    }
</style>